<template>
  <div class="box-shadow">

    <el-form ref="form1" :model="form.business_license_info" :rules="rules" label-width="120px">
      <div style="margin-top: 30px">
        <i class="icon2"></i>
        <div class="headline2">
          <span>营业执照</span>
        </div>
      </div>
      <div class="dev2">
        <el-form-item label="营业执照照片" prop="license_copy">
          <imageUpload v-model="wechatImg.licenseCopy"
                       :mediaId.sync="form.business_license_info.license_copy"></imageUpload>
        </el-form-item>
        <el-form-item style="position: relative;left:-60px;width:500px" label-width="180px" label="注册号/统一社会信用代码"
                      prop="license_number">
          <el-input style="widht:300px" v-model="form.business_license_info.license_number"
                    @blur="institutionalIf"></el-input>
        </el-form-item>
        <el-form-item label="商户名称" prop="merchant_name">
          <el-input v-model="form.business_license_info.merchant_name"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人姓名" prop="legal_person">
          <el-input v-model="form.business_license_info.legal_person"></el-input>
        </el-form-item>
      </div>
      <!--v-if="form.subject_type == 'SUBJECT_TYPE_ENTERPRISE'"-->
    </el-form>

    <el-form v-if="institutional" ref="form2" :model="form.organization_info" :rules="rules2" label-width="120px">
      <div>
        <i class="icon2"></i>
        <div class="headline2">
          <span>组织机构代码证</span>
        </div>

      </div>
      <div class="dev2">
        <el-form-item label="组织机构代码证件照片" prop="organization_copy">
          <imageUpload v-model="wechatImg.organizationCopy"
                       :mediaId.sync="form.organization_info.organization_copy"></imageUpload>
        </el-form-item>

        <el-form-item label="组织机构代码" prop="organization_code">
          <el-input v-model="form.organization_info.organization_code"></el-input>
        </el-form-item>


        <el-form-item label="有效类型">
          <el-radio v-model="certificateDeadline" label="0">定期</el-radio>
          <el-radio v-model="certificateDeadline" label="1">长期</el-radio>
        </el-form-item>

        <el-form-item label="证件生效日期" prop="org_period_begin">
          <el-date-picker
            v-model="form.organization_info.org_period_begin"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item v-if="certificateDeadline !=1" label="证件失效日期" prop="org_period_end">
          <el-date-picker
            v-model="form.organization_info.org_period_end"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

      </div>
    </el-form>

    <el-form ref="form3" :model="form.identity_info.id_card_info" :rules="rules3" label-width="120px">
      <div>
        <i class="icon2"></i>
        <div class="headline2">
          <span>法人代表人证件</span>
        </div>
      </div>
      <div class="dev2">
        <el-form-item label="证件类型">
          身份证
        </el-form-item>

        <el-form-item label="身份证人像面照片" prop="id_card_copy">
          <!--                <el-input v-model="form.identity_info.id_card_info.id_card_copy"></el-input>-->
          <imageUpload v-model="wechatImg.idCardCopy"
                       :mediaId.sync="form.identity_info.id_card_info.id_card_copy"></imageUpload>
        </el-form-item>

        <el-form-item label="身份证国徽面照片" prop="id_card_national">
          <!--                  <el-input v-model="form.identity_info.id_card_info.id_card_national"></el-input>-->
          <imageUpload v-model="wechatImg.idCardNational"
                       :mediaId.sync="form.identity_info.id_card_info.id_card_national"></imageUpload>
        </el-form-item>

        <el-form-item label="身份证号码" prop="id_card_number">
          <el-input v-model="form.identity_info.id_card_info.id_card_number"></el-input>
        </el-form-item>

        <el-form-item label="身份证姓名" prop="id_card_name">
          <el-input v-model="form.identity_info.id_card_info.id_card_name"></el-input>
        </el-form-item>

        <el-form-item label="有效类型">
          <el-radio v-model="legalCertificateDeadline" label="0">定期</el-radio>
          <el-radio v-model="legalCertificateDeadline" label="1">长期</el-radio>
        </el-form-item>

        <el-form-item label="证件生效日期" prop="card_period_begin">
          <el-date-picker
            v-model="form.identity_info.id_card_info.card_period_begin"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item v-if="legalCertificateDeadline != 1" label="证件失效日期" prop="card_period_end">
          <el-date-picker
            v-model="form.identity_info.id_card_info.card_period_end"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

      </div>
    </el-form>

    <div style="margin-left: 70%;margin-bottom:20px">
      <el-button type="primary" @click="submitForm" style="margin-bottom: 20px;">提交并保存</el-button>
      <el-button @click="returnIndex">返回</el-button>
    </div>

    <!-- </el-form-item> -->
    <!-- </el-form> -->
  </div>
</template>

<script>
  import {getSubjectInfo, addSubjectInfo, getWachatImg} from '@/api/applet/payAudit'
  import imageUpload from '@/components/ImageUpload/wechatImg'

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {imageUpload},
    props: { //组件传值
      setAppletInfoStr: {
        type: Boolean,
        default: true,
      },
      indexStr: {
        type: Boolean,
        default: true,
      },
      businessCodeStr: {
        type: String,
        default: '',
      }
    },
    data() {
      //这里存数据
      return {
        //授权单对象
        payAudit: {},
        form: {},
        institutional: false,
        //组织机构证件期限 0定期 1长期
        certificateDeadline: "0",
        //法人组织机构证件期限 0定期 1长期
        legalCertificateDeadline: "0",
        wechatImg: {
          //营业执照照片
          licenseCopy: "",
          //组织机构代码证件照片
          organizationCopy: "",
          //身份证人像面照片
          idCardCopy: "",
          //身份证国徽面照片
          idCardNational: "",
        },
        // 查询参数
        queryParams: {
          mediaIds: []
        },
        // 表单校验
        rules: {
          license_copy: [
            {required: true, message: '营业执照照片不能为空', trigger: 'blur'},
          ],
          license_number: [
            {required: true, message: '注册号/统一社会信用代码不能为空', trigger: 'blur'},
            {min: 2, max: 110, message: '长度在 15 到 18 个字符', trigger: 'blur'}
          ],
          merchant_name: [
            {required: true, message: '商户名称不能为空', trigger: 'blur'},
            {min: 2, max: 110, message: '长度在 2 到 110 个字符', trigger: 'blur'}
          ],
          legal_person: [
            {required: true, message: '个体户经营者/法人姓不能为空', trigger: 'blur'}
          ],
        },
        rules2: {
          organization_copy: [
            {required: true, message: '组织机构代码证照片不能为空', trigger: 'blur'}
          ],
          organization_code: [
            {required: true, message: '组织机构代码不能为空', trigger: 'blur'},
            {min: 9, max: 10, message: '长度在 9 到 10 个字符', trigger: 'blur'}
          ],
          org_period_begin: [
            {required: true, message: '证件生效日期不能为空', trigger: 'blur'},
          ],
          org_period_end: [
            {required: true, message: '证件失效日期不能为空', trigger: 'blur'},
          ],
        },
        rules3: {
          id_card_copy: [
            {required: true, message: '身份证人像面照片不能为空', trigger: 'blur'},
          ],
          id_card_national: [
            {required: true, message: '身份证国徽面照片不能为空', trigger: 'blur'},
          ],
          id_card_name: [
            {required: true, message: '身份证姓名不能为空', trigger: 'blur'},
            {min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur'}
          ],
          id_card_number: [
            {required: true, message: '身份证号码不能为空', trigger: 'blur'},
            {min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur'}
          ],
          card_period_begin: [
            {required: true, message: '证件生效日期不能为空', trigger: 'blur'},
          ],
          card_period_end: [
            {required: true, message: '证件失效日期不能为空', trigger: 'blur'},
          ],
        }




      };
    },
    //计算属性
    computed: {},
    //监控data中数据变化
    watch: {},
    //方法
    methods: {
      returnIndex() {
        window.scrollTo(0, 0);
        this.$emit("update:subjectInfoStr", false);
        this.$emit("update:indexStr", true);
        this.$emit('getData', null)
      },
      getSubjectInfo() {
        getSubjectInfo(this.businessCodeStr).then((response) => {
          this.form = response.data.subjectInfo
          this.payAudit = response.data
          if (this.form) {
            if (this.form.identity_info.id_card_info) {
              if (this.form.identity_info.id_card_info.card_period_end == null) {
                this.legalCertificateDeadline = "1"
              }
              if (this.form.organization_info) {
                if (this.form.organization_info.org_period_end == null) {
                  this.certificateDeadline = "1"
                }
              }
            }
            if (this.form.identity_info.id_card_info) {
              const mediaIds = []
              mediaIds.push(response.data.subjectInfo.business_license_info.license_copy)
              if (this.form.organization_info) {
                mediaIds.push(this.form.organization_info.organization_copy)
              }
              mediaIds.push(this.form.identity_info.id_card_info.id_card_copy)
              mediaIds.push(this.form.identity_info.id_card_info.id_card_national)
              getWachatImg(mediaIds).then((response) => {

                var data = response.data
                for (let i = 0; i < response.data.length; i++) {
                  if (data[i].mediaId == this.form.business_license_info.license_copy) {
                    this.wechatImg.licenseCopy = data[i].localityUrl
                  }

                  if (this.form.organization_info) {
                    if (data[i].mediaId == this.form.organization_info.organization_copy) {
                      this.wechatImg.organizationCopy = data[i].localityUrl
                    }
                  }

                  if (data[i].mediaId == this.form.identity_info.id_card_info.id_card_copy) {
                    this.wechatImg.idCardCopy = data[i].localityUrl
                  }
                  if (data[i].mediaId == this.form.identity_info.id_card_info.id_card_national) {
                    this.wechatImg.idCardNational = data[i].localityUrl
                  }
                }
              })
            }
          }
        })
      },
      institutionalIf() {
        if ((this.form.business_license_info.license_number != null && this.payAudit.subjectType == "SUBJECT_TYPE_ENTERPRISE" && this.form.business_license_info.license_number.length != 18)) {
          this.institutional = true
        } else {
          this.institutional = false
        }
      },


      /** 提交按钮 */
      submitForm() {
        if (this.legalCertificateDeadline == 1) {
          this.form.identity_info.id_card_info.card_period_end = null
        }
        if (this.certificateDeadline == 1) {
          this.form.organization_info.org_period_end = null
        }


        // this.$refs["form1"].validate((valid) => {
        //   if (valid) {
        //     this.formType1 = true;
        //   } else this.formType1 = false;
        // });
        // if (this.form.subject_type == 'SUBJECT_TYPE_ENTERPRISE') {
        //   if (this.formType1) {
        //
        //     this.$refs["form2"].validate((valid) => {
        //       if (valid) {
        //         this.formType2 = true;
        //       } else this.formType2 = false;
        //     });
        //   }
        // }
        //
        // this.$refs["form3"].validate((valid) => {
        //   if (valid) {
        //     this.formType3 = true;
        //   } else this.formType3 = false;
        // });


        // if ((this.formType1 && this.formType2 && this.formType3) || (this.formType1 && this.formType3)) {

        if (this.institutional == false){
          this.form.organization_info = null
        }
            addSubjectInfo(this.form, this.payAudit.businessCode).then((response) => {
            this.msgSuccess('新增成功')
            this.open = false
            this.returnIndex()
          })
        // }
      },
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getSubjectInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {
    },//生命周期 - 创建之前
    beforeMount() {
    },//生命周期 - 挂载之前
    beforeUpdate() {
    },//声明周期 - 更新之前
    updated() {
    },//生命周期 - 更新之后
    beforeDestroy() {
    },//生命周期 - 销毁之前
    destroyed() {
    },//生命周期 - 销毁之后
    activated() {
    },//缓存keep-alive
  }
</script>

<style scoped>

  .icon1 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }

  .icon2 {
    display: inline-block;
    background: #13ce66;
    margin-left: 5%;
    width: 5px;
    height: 16px;
    margin-right: 8px;
  }

  .headline2 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
    margin-top: 20px;
  }


  .box-shadow {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    background-color: #fff;
  }

  .dev {
    margin-left: 10%;
    margin-top: 5%;
    width: 70%;
  }

  .dev2 {
    margin-left: 10%;
    margin-top: 5%;
    width: 50%;
  }
</style>
